<template>
  <div class="node_detail">
      <el-dialog title="节点详情"  :close-on-click-modal='false' :visible.sync="dialogTableVisible" @closed='closeDialog'>
        <div class="node-panel">
           <div class="panel-title">{{node.Panelname}}</div>
           <div class="panel-node-layout">
            <div class="node-item" v-for="(item,index) in nodeKeys" :key="index">
              <span class="node-key">{{item.key}}</span> :
              <span class="node-value" v-if="item.value === 'CreateTime'">{{formatTime(node[item.value])}}</span>
               <span class="node-value" v-else>{{node[item.value]}}</span>
            </div>
           </div>
           
        </div>
       
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: "node_detail",
  components: {},
  props:{
    showNodedetail:{
      type:Boolean,
      default:false
    },
    node:{
      type : Object,
      default:()=>{}
    }
  },
  data() {
    return {
      dialogTableVisible : false,
      nodeKeys:[
        {
        key:'创建时间',
        value:'CreateTime'
      },
      {
        key:'节点id',
        value:'id'
      },
      {
        key:'节点名称',
        value:'name'
      },
      {
        key:'节点状态',
        value:'state'
      },
      {
        key:'节点类型',
        value:'type'
      },
      {
        key:'节点图标',
        value:'ico'
      },
      {
        key:'节点坐标X',
        value:'left'
      },
        {
        key:'节点坐标Y',
        value:'top'
      },
      ]
    };
  },
  methods: {
    closeDialog() {
      this.dialogTableVisible = false
      this.$emit('close')
    },
    formatTime (time) {
      return dayjs(time).format("YYYY-MM-DD hh:mm:ss")
    }
  },
  watch:{
    showNodedetail:function () {
     this.dialogTableVisible = this.showNodedetail
    },
  }
};
</script>

<style scoped>
.node-panel{
  display: flex;
  padding: 5px 25px;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.panel-title{
  font-size: 17px;
  font-weight: 700;
}
.panel-node-layout{
  display: flex;
  width: 100%;
  /* justify-content: space-between; */
  flex-wrap: wrap;
}
.panel-node-layout .node-item{
  width: 30%;
  margin: 0 10px;
  flex-grow: 0;
  line-height: 40px;
}
.panel-node-layout .node-item .node-key{
  font-size: 15px;
  background: linear-gradient(to right, #956ae1, #b191e9);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.node-item:nth-child(3n+1){
  margin-left: 0px;
}
.Panel_name{
  font-size: 16px;
}
.attributekey{
  font-size: 16px;
  color: #56a2f8;
}

</style>